import React, { Component } from 'react'
import {
    AppRegistry,
    View,
    Text,
    StyleSheet,
    TouchableOpacity
} from 'react-native'
import { RegionPicker } from "@yz1311/react-native-wheel-picker";


// 读取本地json文件
let jsonData = require('./areaAllData').default

export default class RegionAllPickerView extends Component {

    // 通过 state 更新
    constructor(props) {
        super(props)

        // jsonData.map(item => {
        //     item.children.unshift( {
        //         areaCode: "0",
        //         areaCodeStr: "0",
        //         code: "0",
        //         name: "不限"
        //     })
        // })

        this.state = {
            // 省
        }
    }


    componentDidMount() {

    }

    cancel() {
        if (this.props.hide) {
            this.props.hide()
        }
    }

    sure(names, codes) {
        let param = {
            provinceName: names[0],
            provinceId: codes[0],
            cityName: names[1],
            cityId: codes[1],
            areaName: names[2],
            areaId: codes[2],
            areaCodeStr:''
        }
        this.props.selectArea(param)
    }

    render() {
        return (
            <>
                {
                    this.props.show && (
                        <View style={styles.container}>
                            <View
                                style={styles.mask}
                            >
                                <RegionPicker
                                    //模式，'p' | 'pc' | 'pca'三个值分别代表省、省市、省市区 三种模式,默认是pca
                                    mode={this.props.mode ? this.props.mode : 'pca'}
                                    data={jsonData}
                                    itemStyle={{ fontSize: 12 }}
                                    onPickerConfirm={(names, codes) => {
                                        this.sure(names, codes)
                                    }}
                                    onPickerCancel={() => {
                                        this.cancel()
                                    }}
                                    selectedValue={['']}
                                    onValueChange={(names)=>{
                                        console.log('onValueChange', names)
                                    }}
                                />
                            </View>
                        </View>
                    )
                }

            </>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        zIndex: 100,
    },
    mask: {
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0,0,0,0.5)',
        flexDirection: 'column',
        justifyContent: 'flex-end',
    },
    text: {
        width: 200,
        height: 60,
        marginTop: 100,
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
    },
    topBox: {
        width: '100%',
        height: 44,
        backgroundColor: '#fff',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    pickerViewContainer: {
        // backgroundColor: '#f9f9f9',
        width: '100%',
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#ffffff',
    },

    pickerItem: {
        flex: 1,
        fontSize: 10,
        backgroundColor: '#f9f9f9',
        height: 200,
    },
    btnBox: {
        width: 60,
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center'
    },
    cancelText: {
        color: '#888'
    },
    sureText: {
        color: '#0a5cf5'
    }
})
